<template>
  <view class="page" v-if="dataInfo">
    <form :model="dataInfo" ref="form" class="form">
      <view class="form-view">
        <view class="group">
          <view class="group-title-view">
            <text class="group-title">用户信息</text>
          </view>
          <view class="field-view">
            <view class="field">
              <view class="field-title">
                <text>姓名：</text>
              </view>

              <view class="field-value">
                {{ dataInfo.name }}
              </view>
            </view>
          </view>
          <view class="field-view">
            <view class="field">
              <view class="field-title">
                <text>手机号：</text>
              </view>

              <view class="field-value">
                {{ dataInfo.mobile }}
              </view>
            </view>
          </view>
          <view class="field-view">
            <view class="field">
              <view class="field-title">
                <text>状态： </text>
              </view>

              <view class="field-value">
                {{
                  dataInfo.status
                    ? "使用中"
                    : !dataInfo.is_company_check
                    ? "待审核"
                    : "禁用"
                }}
              </view>
            </view>
          </view>
          <view class="field-view">
            <view class="field">
              <view class="field-title">
                <text>注册时间：</text>
              </view>

              <view class="field-value">
                {{ dataInfo.create_time }}
              </view>
            </view>
          </view>
          <view class="field-view">
            <view class="field">
              <view class="field-title">
                <text>最后登入时间：</text>
              </view>

              <view class="field-value">
                {{ dataInfo.last_login_time || "暂无" }}
              </view>
            </view>
          </view>
        </view>
        <view class="group">
          <view class="group-title-view">
            <text class="group-title">角色管理</text>
          </view>
          <view class="field-view">
            <view class="field">
              <view class="field-value">
                <picker
                  v-model="currentRole"
                  :range="roleOptions"
                  range-key="label"
                  @change="onChangePicker"
                >
                  <view class="picker">
                    <view class="text">
                      {{ currentRoleLabel }}
                    </view>
                    <image
                      :src="imgBaseUrlV2 + 'arrow_down.png'"
                      class="picker-icon"
                    />
                  </view>
                </picker>
              </view>
            </view>
          </view>
        </view>
        <view class="btn-view">
          <view
            class="submit-btn"
            v-if="!dataForm.company_role_id"
            @click="showLockUser = true"
            :class="[dataInfo.status ? 'btn-error' : 'btn-success']"
            >{{ dataInfo.status ? "禁用" : "启用" }}</view
          >
          <view
            class="submit-btn"
            @click="submit"
            :class="[
              dataForm.company_role_id === null ? 'btn-default' : 'btn-primary',
            ]"
            >审核</view
          >
        </view>
      </view>
    </form>

    <!-- <u-toast ref="uToast" /> -->
    <x-modal
      v-model="showLockUser"
      :title="'提示'"
      :content="'确定' + (dataInfo.status ? '禁用' : '启用') + '该用户吗'"
      :show-cancel-button="true"
      @confirm="lockUser"
    ></x-modal>

    <Message ref="message"></Message>
  </view>
</template>

<script>
import detailModule from "@/common/mixins/detail-module";
import { putUser, lockUser, editUserRole } from "@/common/api/user.js";
import { getRoleOptionsForUser } from "@/common/api/role.js";
import xModal from "@/components/public/x-modal/x-modal";

import { imgBaseUrl, imgBaseUrlV0, imgBaseUrlV2 } from "@/common/config/index";
export default {
  mixins: [detailModule],
  components: {
    xModal,
  },
  data() {
    return {
      imgBaseUrlV0,
      imgBaseUrlV2,
      dataInfo: null,
      roleOptions: [],
      roleSelectShow: false,
      currentRole: 0,
      currentRoleLabel: "请选择角色",
      showLockUser: false,
      dataForm: {
        company_role_id: "",
      },
      mixinViewOptions: {
        getURL: "/companyUser/userDetail",
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: true,
      },
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    // this.$refs.form && this.$refs.form.setRules(this.rules);
  },
  onLoad(e) {
    // console.log(e)
    if (e.userId) {
      this.dataForm.id = e.userId;
      this.getDataInfo();
    }

    this.initData();
  },
  methods: {
    async initData() {
      await this.getRoleOptions();
      if (
        this.roleOptions.length !== 0 &&
        this.dataInfo &&
        this.dataInfo.company_role_id
      ) {
        const roles = this.roleOptions.find(
          (item) => item.value === this.dataInfo.company_role_id
        );
        if (roles) {
          this.currentRoleLabel = roles.label;
          this.dataInfo.company_role_id = roles.value;
        }
      }
    },
    getRoleOptions() {
      return getRoleOptionsForUser({
        clientSide: 1,
      }).then((res) => {
        let data = res.data;
        data.forEach((i) => {
          i.label = i.role_name;
          i.value = i.id;
        });
        this.roleOptions = data;
      });
    },
    roleSelectConfirm(e) {
      this.currentRoleLabel = e[0].label;
      this.dataInfo.company_role_id = e[0].value;
    },
    onChangePicker(e) {
      let value = e.detail.value;
      this.currentRole = value;
      let item = this.roleOptions[value];
      console.log(item, "?e");
      this.currentRoleLabel = item.label;
      this.dataInfo.company_role_id = item.value;
    },
    submit() {
      if (!this.dataInfo.company_role_id) {
        return this.message.error("请选择角色");
      }
      return this.showModal({
        title: "提示",
        content: "确认审核通过吗?",
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: "审核中",
            });
            // this.$refs.form.validate(async (valid) => {
            // if (valid) {
            return editUserRole({
              ...this.dataInfo,
              role_id: this.dataInfo.company_role_id,
            })
              .then((res) => {
                uni.hideLoading();
                if (res.code !== this.$ERR_OK) {
                  return this.message.error(res.message || "审核通过失败!");
                }
                this.message.success("审核成功");
                let data = res.data;
                // this.company_role_id = this.dataInfo.company_role_id;
                uni.$emit("refresh-permission-user-list", null);
                this.getDataInfo();
              })
              .catch((err) => {
                uni.hideLoading();
              });
            // }
            // });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    lockUser() {
      const status = this.dataInfo.status ? 0 : 1;
      uni.showLoading({
        title: status ? "启用" : "禁用",
      });
      return lockUser({ id: this.dataInfo.id, status }).then((res) => {
        uni.hideLoading();
        if (res.code !== this.$ERR_OK)
          return this.message.error(res.message || "操作失败");
        this.dataInfo.status = status;
        this.message.success((status ? "启用" : "禁用") + "成功");
        uni.$emit("refresh-permission-user-list", null);
        this.getDataInfo();
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.page {
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0d1523 0%, #102945 100%);
  padding-bottom: 120rpx;
}

.form {
  padding-top: 0;

  .form-view {
    padding: 30rpx 24rpx;
  }

  .group {
    line-height: 72rpx;
    padding-top: 24rpx;

    &:first-child {
      padding-top: 0;
    }

    .group-title-view {
      position: relative;
      // border-top-left-radius: 5rpx;
      // border-top-right-radius: 5rpx;
      overflow: hidden;
      // background: #EEEEEE;
      margin-bottom: 12rpx;

      .bg {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
      }

      .group-title-icon {
        position: relative;
        z-index: 2;
        width: 24rpx;
        margin: 0 20rpx;
        vertical-align: middle;
      }

      .group-title {
        position: relative;
        z-index: 2;
        color: color-white;
        font-size: 28rpx;
        padding: 0 20rpx;
      }
    }

    .field-view {
      display: flex;
      flex-direction: row;

      .field {
        display: flex;
        flex: 1;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: color-white;

        &:nth-child(2) {
          margin-left: 90rpx;
        }

        .field-title {
          flex: 0 0 auto;
        }

        .field-value {
          flex: 1;
          text-align: right;
        }
      }
    }
  }

  .btn-view {
    position: fixed;
    display: flex;
    width: 100%;
    bottom: 0;
    left: 0;
    flex-direction: row;
    padding: 30rpx 24rpx;

    .submit-btn {
      flex: 1;
      margin-right: 20rpx;
      text-align: center;
      color: #fff;
      line-height: 86rpx;
      height: 90rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: bold;
      font-size: 36rpx;
      border-radius: 10rpx;
      border: 1rpx solid #fff;
      transition: all 0.3s;

      &:last-child {
        margin-right: 0;
      }
    }

    .btn-default {
      background: #D8D8D8;
      color: #fff;
    }

    .btn-success {
      // background-color: #4cd964;
      border-color: color-success;
      color: color-success;
    }

    .btn-warn {
      background-color: #f0ad4e;
    }

    .btn-primary {
	  border-color:color-active;
      background: color-active;
    }

    .btn-error {
      background-color: transparent;
      border-color: #DC2A2A;
      color: #DC2A2A;
      // background-color: #dd524d;
    }
  }
}

.picker {
  position: relative;
  display: block;
  padding: 0 20rpx;
  height: 90rpx;
  line-height: 86rpx;
  text-align: left;
  border-radius: 10rpx;
  border: 1rpx solid #3f7dff;
  margin-top: 16rpx;
  padding-right: 40rpx;

  .picker-icon {
    position: absolute;
    right: 20rpx;
    top: 0;
    bottom: 0;
    width: 38rpx;
    height: 38rpx;
    margin: auto;
  }
}
</style>